<template>

  <div style="width: 1200px;margin: 0 auto">
    <div class="flexBet">
      <div class="infobox">
        <div class="title_l">
          帮助中心
        </div>
        <ul class="nav_l">
          <li @click="changeTab('instructions')" :class="index===2?'active':''">操作说明</li>
          <li @click="changeTab('radio')" :class="index===1?'active':''">操作视频</li>
          <li @click="changeTab('question')" :class="index===3?'active':''">常见使用问题</li>
          <li @click="changeTab('videozip')" :class="index===4?'active':''">视频压缩教程</li>
        </ul>
      </div>
      <card
        :width="912"
        :top="24"
        :height="'calc(100vh - 68px - 18px - 60px)'"
        class="learningSituation"
      >
        <div class="content_one" v-if="index===1">
          <div class="sea_bar">
            <el-input
              style="width: 224px;margin-right: 20px"
              placeholder="请输入"
              suffix-icon="el-icon-search"
              v-model="courseName"
              @change="getList"
              @keyup.enter.native="getList"
            >
            </el-input>
            <el-button type="text" @click="resetList">重置</el-button>
          </div>

          <div>
            <div class="img_list">
              <div class="view_img" v-for="(item,index) in radioList2" :key="index">
                <div class="video_box">
                  <img class="video_img" src="@/assets/images/video_img.png" alt="加载失败">
                  <video-review class="video_box" ref="videoReview" :videoSrc="item.url"></video-review>
                  <!--                  <div class="video_box"></div>-->
                </div>
                <div class="video_name">{{ item.name }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="content_two" v-if="index===2">
          <div style="width: 100%;height: 700px;" v-loading="loading" v-if="loading"></div>
          <iframe
            width="100%"
            height="800px"
            :src="iframeSrc"
            title="语雀文档"
            frameborder="0"
          ></iframe>
        </div>
        <div class="content_three" v-if="index===3&&!indexdetail">
          <!-- 搜索项 -->
          <div class="search_bar">
            <el-form size="small" :inline="true" label-width="68px">
              <el-form-item label="问题概述">
                <el-input
                  v-model="sea_form.faqName"
                  placeholder="请输入"
                  clearable
                />
              </el-form-item>
              <el-form-item label="问题类型">
                <el-select
                  placeholder="请选择"
                  v-model="sea_form.faqTypeId"
                  filterable
                >
                  <el-option
                    v-for="item in typeList"
                    :key="item.faqTypeId"
                    :label="item.faqTypeName"
                    :value="item.faqTypeId"
                  />
                </el-select>
              </el-form-item>
              <el-form-item class="search_btns">
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  size="mini"
                  @click="getdataBysearch"
                >搜索
                </el-button
                >
                <el-button icon="el-icon-refresh" size="mini" @click="resetSearch"
                >重置
                </el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <div class="questionCard">
            <div v-for="(item,index) in postList" :key="index" class="cardItem">
              <el-card class="cardItem">
                <div class="questionItem" @click="changeTab('questionDetail',item.faqId)">
                  <div>
                    <el-tag effect="dark">{{ item.faqTypeName }}</el-tag>
                    <span>{{ item.faqName }}</span>
                  </div>

                  <div><i class="el-icon-arrow-right"></i></div>
                </div>
              </el-card>
            </div>
          </div>

        </div>
        <div class="content_four" v-if="index===4">

          <img src="@/assets/images/1.png" alt="加载失败">
          <img src="@/assets/images/2.png" alt="加载失败">
          <img src="@/assets/images/3.png" alt="加载失败">
          <img src="@/assets/images/4.png" alt="加载失败">
          <img src="@/assets/images/5.png" alt="加载失败">
          <img src="@/assets/images/6.png" alt="加载失败">

        </div>
        <div class="content_five" v-if="indexdetail===1&&index===3" v-loading="!problemInfo.faqName">
          <div class="questionTitle">
            <i class="el-icon-arrow-left" @click="retunTo"></i>
            <span>{{ problemInfo.faqName }}</span>
          </div>
          <div class="questioncontent">
            <div class="title">问题详情：</div>
            <div v-html="problemInfo.faqStem"></div>
            <div class="title second">问题解答：</div>
            <div v-html="problemInfo.faqAnswer"></div>
          </div>
        </div>
      </card>
    </div>
  </div>

</template>
<script>
import videoReview from '@/components/videoReview/videoReview.vue'
import { getfaqlist, getfaqTypelist, getfaqDetail } from '@/api/commonproblem/problem'

export default {
  components: { videoReview },
  name: 'helpCenter',
  data() {
    return {
      loading: true,
      index: 2,
      indexdetail: 0,
      radioList: [
        {
          name: '课程创建(工学一体化模板)',
          url: 'https://oss.metaxun.com/cloud/public/1%E3%80%81%E8%AF%BE%E7%A8%8B%E5%88%9B%E5%BB%BA%EF%BC%88%E5%B7%A5%E5%AD%A6%E4%B8%80%E4%BD%93%E5%8C%96%E6%A8%A1%E6%9D%BF%EF%BC%89.mp4'
        },
        {
          name: '课程创建(通用模板)',
          url: 'https://oss.metaxun.com/cloud/public/2%E3%80%81%E8%AF%BE%E7%A8%8B%E5%88%9B%E5%BB%BA%EF%BC%88%E9%80%9A%E7%94%A8%E6%A8%A1%E6%9D%BF%EF%BC%89.mp4\n'
        },
        {
          name: '题库模板上传',
          url: 'https://oss.metaxun.com/cloud/public/3%E3%80%81%E9%A2%98%E5%BA%93%E6%A8%A1%E6%9D%BF%E4%B8%8A%E4%BC%A0.mp4'
        },
        {
          name: '考核功能',
          url: 'https://oss.metaxun.com/cloud/public/4%E3%80%81%E8%80%83%E6%A0%B8%E5%8A%9F%E8%83%BD.mp4'
        },
        {
          name: '班级关联',
          url: 'https://oss.metaxun.com/cloud/public/5%E3%80%81%E7%8F%AD%E7%BA%A7%E5%85%B3%E8%81%94.mp4'
        }
      ],
      courseName: '',
      activeNames: ['0'],
      open: false,
      radioList2: [
        {
          name: '课程创建(工学一体化模板)',
          url: 'https://oss.metaxun.com/cloud/public/1%E3%80%81%E8%AF%BE%E7%A8%8B%E5%88%9B%E5%BB%BA%EF%BC%88%E5%B7%A5%E5%AD%A6%E4%B8%80%E4%BD%93%E5%8C%96%E6%A8%A1%E6%9D%BF%EF%BC%89.mp4'
        },
        {
          name: '课程创建(通用模板)',
          url: 'https://oss.metaxun.com/cloud/public/2%E3%80%81%E8%AF%BE%E7%A8%8B%E5%88%9B%E5%BB%BA%EF%BC%88%E9%80%9A%E7%94%A8%E6%A8%A1%E6%9D%BF%EF%BC%89.mp4\n'
        },
        {
          name: '题库模板上传',
          url: 'https://oss.metaxun.com/cloud/public/3%E3%80%81%E9%A2%98%E5%BA%93%E6%A8%A1%E6%9D%BF%E4%B8%8A%E4%BC%A0.mp4'
        },
        {
          name: '考核功能',
          url: 'https://oss.metaxun.com/cloud/public/4%E3%80%81%E8%80%83%E6%A0%B8%E5%8A%9F%E8%83%BD.mp4'
        },
        {
          name: '班级关联',
          url: 'https://oss.metaxun.com/cloud/public/5%E3%80%81%E7%8F%AD%E7%BA%A7%E5%85%B3%E8%81%94.mp4'
        }
      ],
      // 语雀文档的 ID
      docId: 'guxuit8ofrow1fux',
      // iframe 的 src 属性
      iframeSrc: `https://hzhgcc.yuque.com/org-wiki-hzhgcc-bz0h1m/hg0z8d/lg92fc04tg039vsm?singleDoc# 《元智训数字化学习平台教师端操作指南》`,
      // 搜索条件
      sea_form: {
        faqName: '',
        faqTypeId: ''
      },
      typeList: [],
      postList: [],
      faqId: '',
      problemInfo: {}
    }
  },
  mounted() {
    this.loading = true
    this.getTypelist()
    this.getquestionList()
  },
  methods: {
    retunTo() {
      this.problemInfo = {}
      this.indexdetail = 0
      this.index = 3

    },

    changeTab(type, faqId) {
      if (type === 'radio') {
        this.index = 1
        this.loading = true
      } else if (type === 'instructions') {
        this.loading = true
        this.index = 2
        setTimeout(() => {
          this.loading = false
        }, 1000)
      } else if (type === 'question') {
        this.index = 3
        this.loading = true
      } else if (type === 'videozip') {
        this.index = 4
        this.loading = true
      } else if (type === 'questionDetail') {
        this.index = 3
        this.indexdetail = 1
        this.faqId = faqId
        this.loading = true
        this.getdetail()

      }

    },
    // 搜索
    getdataBysearch() {
      // 发送获取信息请求
      this.getquestionList()
    },
    // 获取问题
    getquestionList() {
      this.loading = true
      getfaqlist(this.sea_form).then(res => {
        if (res.code == 200) {
          this.postList = res.data
        }
      }).catch(() => {
        this.loading = false
      }).finally(() => {
        this.loading = false
      })
      // 发送请求
    },
    // 获取问题类型
    async getTypelist() {
      let res = await getfaqTypelist()
      if (res.code == 200) {
        this.typeList = res.data
      }
      console.log(res, 'faqTypelist')
    },
    // 获取问题详情
    // 获取详情
    async getdetail() {
      let res = await getfaqDetail(this.faqId)
      if (res.code == 200) {
        console.log(res.data)
        this.problemInfo = res.data
      }

    },
    // 重置
    resetSearch() {
      this.sea_form = {
        faqName: '',
        faqTypeId: ''
      }
      this.getdataBysearch()
    },
    // 搜索视频
    getList() {
      let arr = []
      if (this.courseName == '') {
        this.radioList2 = this.radioList
        return
      }
      this.radioList.forEach(e => {
        if (e.name.includes(this.courseName)) {
          arr.push(e)
        }
      })
      this.radioList2 = arr
    },

    resetList() {
      this.radioList2 = this.radioList
    }

  }
}
</script>
<style scoped lang="scss">
.infobox {
  width: 272px;
  min-height: 346px;
  background: white;
  border-radius: 16px;
  padding: 24px 0 10px 0;
  box-sizing: border-box;
  margin-top: 24px;

  .title_l {
    //height: 72px;
    font-weight: 600;
    font-size: 18px;
    color: #333333;
    line-height: 25px;
    padding-left: 24px;
    padding-bottom: 22px;
    box-sizing: border-box;
    border-bottom: 1px solid #EDEFF0;
    margin-bottom: 40px;
  }

  .nav_l {
    list-style-type: none;
    padding: 0;
    box-sizing: border-box;
    cursor: default;

    li {
      padding: 0 0 0 49px;
      box-sizing: border-box;
      //background: #999999;
      height: 35px;
      line-height: 35px;
      font-weight: 400;
      font-size: 16px;
      color: #333333;
      margin-top: 20px;
    }

    li.active {
      padding: 0 0 0 49px;
      box-sizing: border-box;
      height: 35px;
      line-height: 35px;
      font-weight: 400;
      font-size: 16px;
      color: #333333;
      margin-top: 20px;
      background: rgba(5, 192, 173, 0.08);
    }
  }
}

.learningSituation {
  overflow: auto;
}

.learningSituation::-webkit-scrollbar {
  display: none;
}

.content_one {
  padding: 24px 0;
  box-sizing: border-box;
}

.img_list {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  .video_box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f5f5f5;
    border-radius: 8px;
    cursor: pointer;

  }

  .video_img {
    width: 24px;
    height: 24px;
    object-fit: cover;
    position: absolute;
  }

  .view_img {
    width: 200px;
    height: 150px;
    border-radius: 8px;
    margin-left: 56px;
    margin-bottom: 85px;
    position: relative;
  }

  .video_name {
    text-align: center;
    margin-top: 9px;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    line-height: 20px;
  }
}

.sea_bar {
  //background: red;
  padding-left: 56px;
  box-sizing: border-box;
  margin-bottom: 46px;
}

.search_bar {
  padding: 20px 20px 0 20px;
  background-color: #fafafa;
  margin: 20px 0;
  box-sizing: border-box;

  .search_btns {
    float: right;
  }
}

.content_three {
  padding: 25px;
  box-sizing: border-box;
}

.content_five {
  padding: 25px;
  box-sizing: border-box;
}

.lips_circle {
  font-size: 18px;
  margin-right: 16px;
}

.lips_title {

  font-weight: 500;
  font-size: 16px;
  color: #333
}

.lips_item {
  margin-bottom: 8px;
  font-weight: 400;
  font-size: 14px;
  color: #999999;
  cursor: default;
}

.lips_item:last-child {
  margin-bottom: 40px;
}

.changeIcon {
  width: 16px;
  height: 16px;
  margin-left: 630px;
}

.questionItem {
  display: flex;
  align-items: center;
  justify-content: space-between;

  div:first-child > span {
    margin-left: 20px;
  }
}

.questionTitle {
  span {
    margin-left: 20px;
  }
}

::v-deep .el-collapse-item {
  //background: red;
  border-bottom: 1px solid #ebeef5;
}

::v-deep .el-collapse-item__header {
  height: 60px !important;
  //background: #999999;
}

::v-deep .el-card__body {
  padding: 20px !important;
}

::v-deep .questionItem p {
  display: inline-block !important;
}

.cardItem {
  margin-bottom: 20px;
}

.problemTitle {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}

.questioncontent {
  padding-left: 30px;
  box-sizing: border-box;
  margin-top: 40px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0;
}

.second {
  margin-top: 20px;
}
</style>
